<template>
  <el-dialog v-model="dialogUploadVisible" @close="handleDialogUploadClose()" title="模板上传" width="500">
    <div class="dialog-wrapper">
      <div class="file-upload__wrapper">
        <form id="file-form">
          <input type="file" name="" class="file-upload__input" id="my-file-upload" size="28" @change="handleChange"
            ref="fileInputRef" />
        </form>
        <div class="file-upload__name" ref="fileUploadNameRef"></div>
        <label for="my-file-upload" class="file-upload__label">选择文件</label>
      </div>
      <el-button type="success" @click="uploadFile()" style="margin-left: 10px">
        上传
      </el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineExpose } from "vue";
import { ElMessage } from "element-plus";
import { fetchTemplateData } from "@/api/get-data.js";
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore(pinia);

let dialogUploadVisible = ref(false);
let currentCode = ref("");
const fileInputRef = ref<HTMLInputElement | null>(null);
const fileUploadNameRef = ref<HTMLDivElement | null>(null);

const checkWordType = (word) => {
  const index = word.lastIndexOf(".");
  return word.substring(index);
};

const uploadFile = () => {
  // const fileInput = document.getElementById("my-file-upload");
  const file = fileInputRef.value.files[0];

  // 文件选择相关
  if (file) {
    const fileType = checkWordType(file.name);

    if (fileType.indexOf(".doc") < 0 || fileType.indexOf(".docx") < 0) {
      ElMessage({
        message: "只能选择.docx/doc类型模板文件",
        type: "error",
      });
      return;
    }
  } else {
    ElMessage({
      message: "请选择Word模板文件",
      type: "error",
    });
    return;
  }

  console.log("file");
  console.log(file);

  const formData = new FormData();
  formData.append("wordFile", file);
  formData.append("tmCode", currentCode.value);

  const xhr = new XMLHttpRequest();
  xhr.open(
    "POST",
    "/WordTool/word/template/upload",
    true
  );
  xhr.onload = function () {
    if (xhr.status == 200) {
      dialogUploadVisible.value = false;
      ElMessage({
        message: "模板上传成功",
        type: "success",
      });
      fetchTemplateData(
        mapStore.templateTableCurrentPage,
        mapStore.templateTablePageSize
      );
    } else {
      ElMessage({
        message: "模板上传失败",
        type: "error",
      });
    }
  };
  xhr.send(formData);
};

const handleDialogUploadClose = () => {
  dialogUploadVisible.value = false;
  document.getElementById("file-form").reset();
  fileUploadNameRef.value.textContent = "";
};

const handleChange = () => {
  const file = fileInputRef.value.files[0];
  fileUploadNameRef.value.textContent = "";
  console.log("file：");
  console.log(file);
  if (file) {
    const fileType = checkWordType(file.name);
    if (fileType.indexOf(".doc") < 0 || fileType.indexOf(".docx") < 0) {
      ElMessage({
        message: "只能选择.docx/doc类型模板文件",
        type: "error",
      });
      document.getElementById("file-form").reset();
      return false;
    }
    fileUploadNameRef.value.textContent = file.name;
  } else {
    ElMessage({
      message: "请选择Word模板文件",
      type: "error",
    });
  }
};

defineExpose({ dialogUploadVisible, currentCode });
</script>

<style scoped>
.dialog-wrapper {
  display: flex;
  height: auto;
  padding-bottom: 20px;
}

.file-upload__wrapper {
  flex: 1;
  border: 1px solid #ddd;
  height: 30px;
  display: flex;
}

.file-upload__input {
  display: none;
}

.file-upload__label {
  display: block;
  padding: 5px 10px;
  height: 31px;
  /* line-height: 16px; */
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.file-upload__label:hover {
  background-color: #0056b3;
}

.file-upload__name {
  flex: 1;
  line-height: 30px;
  font-size: 12px;
}
</style>